<page-header [action]="phActionTpl">
  <ng-template #phActionTpl> </ng-template>
</page-header>
<nz-card>
  <form nz-form (ngSubmit)="search()" class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shopId">店铺</nz-form-label>
          <nz-form-control *ngIf="isAdmin || isShow">
            <nz-select
              nzShowSearch
              [(ngModel)]="q.companyId"
              [nzPlaceHolder]="'请选择'"
              name="shopId"
              nzId="shopId"
              (ngModelChange)="companyChange($event)"
            >
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option
                *ngFor="let i of companyList; let n = index"
                [nzLabel]="i['company_name']"
                [nzValue]="i['ID']"
                [nzCustomContent]="true"
                ><div style="{{ i['ID'] == company_id ? 'color:#666DD9' : '' }}">{{ i['company_name'] }}</div></nz-option
              >
            </nz-select>
          </nz-form-control>
          <nz-form-control>
            <nz-select nzShowSearch [(ngModel)]="q.shopId" [nzPlaceHolder]="'请选择'" name="shopId" nzId="shopId">
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option *ngFor="let i of shops" [nzLabel]="i['fordeal_shop_name']" [nzValue]="i['shop_id']"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-select
              nz-col
              nzMd="8"
              nzSm="24"
              [(ngModel)]="q.keywordType"
              name="keywordType"
              nzId="keywordType"
              [nzPlaceHolder]="'请选择'"
            >
              <nz-option *ngFor="let i of keywordType" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
            </nz-select>
            <input nz-input nz-col nzMd="16" nzSm="24" [(ngModel)]="q.keywordVal" id="keywordVal" name="keywordVal" placeholder="请输入" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="dateRange">评价时间</nz-form-label>
          <nz-form-control>
            <nz-range-picker
              nzMode="date"
              [ngModelOptions]="{ standalone: true }"
              [(ngModel)]="dateRange"
              (ngModelChange)="commentedAtChange($event)"
            ></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="orderSn">销售编号</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="q.sn" name="sn" placeholder="请输入单号" id="sn" />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="cancelMark">高级筛选</nz-form-label>
          <nz-form-control>
            <nz-select
              [ngModelOptions]="{ standalone: true }"
              [nzMaxTagCount]="3"
              [nzMaxTagPlaceholder]="tagPlaceHolder"
              nzMode="multiple"
              nzPlaceHolder="Please select"
              [(ngModel)]="searchType"
            >
              <nz-option *ngFor="let item of stOptions" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
            </nz-select>
            <ng-template #tagPlaceHolder let-selectedList>and {{ selectedList.length }} more selected</ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="orderSn">产品标题</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="q.title" name="title" placeholder="请输入产品标题" id="title" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
        <a nz-button (click)="export()" [nzLoading]="exporting" class="mx-sm">导出</a>
      </div>
    </div>
  </form>
  <nz-tabset>
    <nz-tab nzTitle="全部（{{ dimensionCount['all'] }}）" (nzSelect)="tabSelect(-1)"></nz-tab>
    <nz-tab nzTitle="好评（{{ dimensionCount['good'] }}）" (nzSelect)="tabSelect(1)"></nz-tab>
    <nz-tab nzTitle="差评（{{ dimensionCount['bad'] }}）" (nzSelect)="tabSelect(2)"></nz-tab>
  </nz-tabset>
  <nz-table
    #commentTable
    [nzData]="listOfData"
    nzSize="default"
    [nzPageSizeOptions]="[30, 50, 100]"
    [nzLoading]="loading"
    [nzTotal]="total"
    [nzPageSize]="ps"
    [nzPageIndex]="pi"
    [nzFrontPagination]="false"
    [nzShowQuickJumper]="true"
    [nzShowSizeChanger]="true"
    (nzPageIndexChange)="pageIndexChange($event)"
    (nzPageSizeChange)="pageSizeChange($event)"
    [nzShowTotal]="totalTemplate"
  >
    <tbody>
      <ng-container *ngFor="let data of commentTable.data">
        <tr>
          <td width="30%">
            <nz-comment>
              <nz-comment-content>
                <ng-container>
                  <nz-image [nzWidth]="100" [nzHeight]="100" style="float: left; padding-right: 10px" nzSrc="{{ data['pic'] }}"></nz-image>
                  <p>{{ data['title'] }}</p>
                  <p>{{ data['attr'] }}</p>
                  <p>Fordeal SKU： {{ data['skuId'] }}</p>
                </ng-container>
              </nz-comment-content>
            </nz-comment>
          </td>
          <td>
            <nz-comment>
              <nz-comment-content>
                <ng-container>
                  <p>商品id：{{ data['itemId'] }}</p>
                  <p>商家货号：{{ data['itemNo'] }}</p>
                  <p>商家sku：{{ data['skuNo'] }}</p>
                </ng-container>
              </nz-comment-content>
            </nz-comment>
          </td>
          <td width="20%">
            <nz-comment>
              <nz-comment-content>
                <ng-container>
                  <p>销售单号：{{ data['sn'] }}</p>
                  <p>
                    评价：<span style="color: {{ dimensionMap[data['dimension']] == '差评' ? 'red' : '#3c9ae8' }}">{{
                      dimensionMap[data['dimension']]
                    }}</span>
                  </p>
                  <p>评价时间：{{ data['commentTimeStamp'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</p>
                </ng-container>
              </nz-comment-content>
            </nz-comment>
          </td>
          <td width="20%">
            <nz-comment>
              <nz-comment-content>
                <ng-container>
                  <nz-tag [nzColor]="'blue'" *ngFor="let i of data['tag']">{{ i }}</nz-tag>
                  <p>{{ data['comment']['content'] }}</p>
                  <br />
                  <ng-container *ngFor="let pic of data['comment']['pics']">
                    <nz-image [nzWidth]="80" [nzHeight]="80" style="padding-right: 10px" nzSrc="{{ pic }}"></nz-image>
                  </ng-container>
                </ng-container>
              </nz-comment-content>
            </nz-comment>
          </td>
          <td
            ><span style="{{ shopMap[data['shopId']] ? '' : 'color:#cccccc' }}"
              >{{ shopMapFull[data['shopId']] }}<br />{{ companyMapFull[data['shopId']] }}</span
            ></td
          >
          <td>商品创建时间：<br />{{ getTime(data['preCreatedAtString']) }}</td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
  <ng-template #totalTemplate let-total> 共 {{ total }} 条 </ng-template>
</nz-card>
